<template id="">
    <div class="table-box">
        <div class="box-nav clearfix">
            <!-- <span class="current" v-bind:class="{ 'class-a' : isA, 'class-b': !isA}" @click="toggle">余额</span> -->
            <span @click="toggle(1)" :class="{'current':current===1}">余额</span>
            <span @click="toggle(2)" :class="{'current':current===2}">收到</span>
        </div>
        <div class="box-table clearfix">
            <div class="box-l">
                <div class="table-tit">Top 100 - Current Balance</div>
                <table class="table-top" border="1">
                    <thead class="table-head">
                        <tr>
                            <th width="8%">排名</th>
                            <th width="40%">地址</th>
                            <th width="30%">余额(HSR)</th>
                            <th width="10%">%</th>
                        </tr>
                    </thead>
                    <tbody class="table-cen">
                        <tr v-for="(item,index) of data">
                            <td>{{item.ranking}}</td>
                            <td>{{item.address}}</td>
                            <td>{{item.balance}}.00000000</td>
                            <td>{{item.proportion}}</td>
                        </tr>
                    </tbody>
                </table>

            </div>
            <div class="box-r">
                <div class="table-tit">财富分配</div>
                <table class="table-wealth" border="1">
                    <thead>
                        <tr>
                            <th width="30%"></th>
                            <th width="45%">总计(HSR)</th>
                            <th width="20%">%</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Top 1-25</td>
                            <td>31126706.43553100</td>
                            <td>73.99</td>
                        </tr>
                        <tr>
                            <td>Top 25-75</td>
                            <td>31126706.43553100</td>
                            <td>73.99</td>
                        </tr>
                        <tr>
                            <td>Top 75-100</td>
                            <td>31126706.43553100</td>
                            <td>73.99</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <th>总数</th>
                            <th></th>
                            <th>88.55</th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'richlist',
    data(){
        return{
            msg:'richlist',
            current:1,
            data:[],
        }
    },
    created(){
        this.tool = this.$root.tool;
        for (var i = 1; i <= 100; i++) {
            this.data.push({
                ranking:i,
                address:this.tool.randomString(34),
                balance:i,
                proportion:i+'%'
            })
        }
    },
    methods:{
        toggle(idx){
            this.current = idx;
            this.data = [];
            this.getData();
        },
        getData(){
            for (var i = 1; i <= 100; i++) {
                this.data.push({
                    ranking:i,
                    address:this.tool.randomString(64),
                    balance:i,
                    proportion:i+'%'
                })
            }
        }
    }
}
</script>
